<template>
	<view>
		<u-sticky>
			<view class="statbar"></view>
			<view class="top">
				<!-- <u-tabs style="height: 40px;width: 100%;" :list="navList" lineHeight="0" :activeStyle="avtiveStyle"
					:inactiveStyle="inactiveStyle" @click="getType"></u-tabs>
				<u-tabs style="height: 40px;" v-if="isLocalRefresh &&typePid" :list="subNavList" lineHeight="0"
					:activeStyle="avtiveStyle" :inactiveStyle="inactiveStyle" @click="getSubType"></u-tabs>
				<u-tabs style="height: 40px;" v-if="isLocalRefresh && typePid" :list="yearList" lineHeight="0"
					:activeStyle="avtiveStyle" :inactiveStyle="inactiveStyle" @click="getVodYear"></u-tabs> -->

				<u-scroll-list :indicator="false">
					<view v-for="(item, index) in navList" :key="index" style="margin-right: 10px;">
						<!-- <u-button type="info" size="small" :text="item.name" @click="getType(item,index)"
							:style="{backgroundColor:index != activeIndex?'transparent':'#d96f55',background:index != activeIndex?'transparent':'#d96f55'}"
							customStyle="height: 25px;color: #FFFFFF;border: 0rpx">
						</u-button> -->
						<view class="btn" @click="getType(item,index)" :style="{backgroundColor:index != activeIndex?'transparent':'#d96f55',background:index != activeIndex?'transparent':'#d96f55'}">{{item.name}}</view>
						
					</view>
				</u-scroll-list>
				<u-scroll-list :indicator="false" v-if="isLocalRefresh &&typePid">
					<view v-for="(item, index) in subNavList" :key="index" style="margin-right: 10px;">
						<!-- <u-button type="info" size="small" :text="item.name" @click="getSubType(item,index)"
							:style="{backgroundColor:index != activeIndex1?'transparent':'#d96f55',background:index != activeIndex1?'transparent':'#d96f55'}"
							customStyle="height: 25px;color: #FFFFFF;border: 0rpx">
						</u-button> -->
						<view class="btn"  @click="getSubType(item,index)" :style="{backgroundColor:index != activeIndex1?'transparent':'#d96f55',background:index != activeIndex1?'transparent':'#d96f55'}">{{item.name}}</view>
					</view>
				</u-scroll-list>
				<u-scroll-list :indicator="false" v-if="isLocalRefresh && typePid">
					<view v-for="(item, index) in yearList" :key="index" style="margin-right: 10px;">
						<!-- <u-button type="info" size="small" :text="item.name" @click="getVodYear(item,index)"
							:style="{backgroundColor:index != activeIndex2?'transparent':'#d96f55',background:index != activeIndex2?'transparent':'#d96f55'}"
							customStyle="height: 25px;color: #FFFFFF;border: 0rpx">
						</u-button> -->
						<view class="btn"  @click="getVodYear(item,index)"  :style="{backgroundColor:index != activeIndex2?'transparent':'#d96f55',background:index != activeIndex2?'transparent':'#d96f55'}">{{item.name}}</view>
						
					</view>
				</u-scroll-list>
			</view>

		</u-sticky>
		<u-loading-page :loading="showLoading" fontSize="14" loadingMode="spinner"></u-loading-page>
		<view class="vod" v-if="!showLoading" v-for="(item, index) in vodList" :key="index">
			<u-row v-if="index%3==0">
				<u-col span="4" justify="between" v-for="i in 3" :key="i">
					<view v-if="(index+i) <=vodList.length">
						<view @click="toDetail(vodList[index+i-1])">
							<image class="cover" :src="vodList[index+i-1].vodPic"></image>
							<view class="renew">{{vodList[index+i-1].vodRemarks}}</view>
							<view class="title">{{vodList[index+i-1].vodName}}</view>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view style="margin: 10px;">
			<u-loadmore :status="status" :line="isShowLine" :nomoreText="nomoreText" loadingIcon="spinner" />
		</view>
	</view>

</template>

<script>
	import {
		getVodPage
	} from '../../config/api.js';

	import {
		initCates
	} from '../../config/util.js';

	export default {
		data() {
			return {
				activeIndex: 0,
				activeIndex1: 0,
				activeIndex2: 0,
				isLocalRefresh: true,
				isVodRefresh: true,
				typePid: '',
				typeId: '',
				vodYear: '',
				navList: [{
					"name": "全部",
					"typeId": ''
				}],
				subNavList: [],
				subNavMap: [],
				yearList: [],
				showLoading: false,
				vodList: [],
				status: 'loadmore',
				current: 1,
				totalPages: 0,
				oldTypePid: '',
				oldTypeId: '',
				oldVodYear: '',
				refreshVodList: [],
				isShowLine: false,
				nomoreText: ''
			}
		},
		onReachBottom() {
			if (this.current >= this.totalPages) return;
			this.status = 'loading';
			this.current = ++this.current;
			var that = this
			setTimeout(() => {
				if (that.current >= that.totalPages) {
					that.status = 'nomore';
				} else {
					that.status = 'loading';
					that.isShowLine = false;
				}
				that.findVodPage();
				that.vodList = that.vodList.concat(that.refreshVodList)

			}, 10)
		},
		onLoad(option) {
			this.findCates();
			this.findYearList();
			this.findVodPage();
			
		},
		methods: {
			toDetail(item) {
				if(uni.getStorageSync('playerSet') == 1){
					uni.$u.route({
						url: 'pages/dplayer/dplayer',
						params: {
						vodInfo: encodeURIComponent(JSON.stringify(item))
						}
					})
				}else{
					uni.$u.route({
						url: 'pages/detail/detail',
						params: {
						vodInfo: encodeURIComponent(JSON.stringify(item))
						}
					})
				}
			},
			findYearList() {
				let date = new Date();
				this.yearList = [{
					"name": "全部",
					"year": ''
				}];
				let currentYear = date.getFullYear(); //年
				for (let i = currentYear; i > (currentYear - 15); i--) {
					let obj = {
						"name": i,
						"year": i
					}
					this.yearList.push(obj);
				}

			},
			async findCates() {				
				let allCates = uni.getStorageSync('VodCatesList')
				this.subNavMap = new Map()

				allCates.forEach((item) => {
					let nav = {
						"name": item.type.typeName,
						"typeId": item.type.typeId
					};
					this.navList.push(nav);
					let subNavList = [{
						"name": "全部",
						"typeId": ''
					}];
					item.childTypes.forEach((t) => {
						let subNav = {
							"name": t.typeName,
							"typeId": t.typeId
						}
						subNavList.push(subNav);
					})
					this.subNavMap.set(item.type.typeId, subNavList);
				})
			},
			getType(item, index) {
				if (this.typePid == item.typeId) {
					return
				}
				this.$nextTick(function(){
					this.activeIndex = index;
					this.activeIndex1 = 0;
					this.activeIndex2 = 0;
				})
				
				this.subNavList = this.subNavMap.get(item.typeId);
				var that = this
				that.typePid = item.typeId;
				that.typeId = '';
				that.vodYear = '';
				this.findVodPage();

			},
			getSubType(item, index) {
				if (this.typeId == item.typeId) {
					return
				}
				this.activeIndex1 = index;

				this.typeId = item.typeId;
				this.isVodRefresh = false
				setTimeout(() => {
					this.isVodRefresh = true
				}, 10);
				this.findVodPage();

			},
			getVodYear(item, index) {
				if (this.vodYear == item.year) {
					return
				}
				this.activeIndex2 = index;
				this.vodYear = item.year;
				this.isVodRefresh = false
				setTimeout(() => {
					this.isVodRefresh = true
				}, 10);
				this.findVodPage();
			},
			findVodPage() {
				if (this.oldVodYear != this.vodYear || this.oldTypePid != this.typePid || this.oldTypePid != this.typePid) {
					this.current = 1,
					this.totalPages = 0;
					this.vodList = [];
				}
				this.isShowLine = false;
				var that = this
				let typePid = that.typePid ? that.typePid : '';
				let typeId = that.typeId ? that.typeId : '';
				let vodYear = that.vodYear ? that.vodYear : '';
				// get请求
				getVodPage("?current=" + that.current + "&size=30&typePid=" + typePid + "&typeId=" + typeId + "&vodYear=" +
					vodYear).then((res) => {
					that.totalPages = res.pages;
					that.oldTypePid = typePid;
					that.oldTypeId = typeId;
					that.oldVodYear = vodYear;
					if (that.current == 1) {
						that.vodList = res.records;
						that.current = 2
						that.findVodPage();
						that.vodList = that.vodList.concat(that.refreshVodList)
						that.current = 3
						that.findVodPage();
						that.vodList = that.vodList.concat(that.refreshVodList)
					}else{
						that.refreshVodList = res.records;
						
					}
					if (that.current >= that.totalPages) {
						setTimeout(() => {
							that.status = 'nomore';
							that.nomoreText = "没有更多数据了"
							that.isShowLine = true;
						}, 10);
					}
				}).catch(() => {

				})
			}

		}
	}
</script>

<style lang="scss">
	.statbar {
		height: var(--status-bar-height);
		background: linear-gradient(to right, #ff8763, #ff6364);
	}

	.top {
		padding: 15px 10px 0px 10px;
		background: linear-gradient(to right, #ff8763, #ff6364);
	}

	/deep/ .u-tabs__wrapper__nav__item {
		justify-content: flex-start;
		padding: 0 0px;
	}

	.vod {
		margin-top: 10px;
		margin-left: 10px;
	}

	.cover {
		width: calc(100% - 10px);
		height: 150px;
		border-radius: 5px;
		position: relative;
	}

	.renew {
		width: 100%;
		position: relative;
		z-index: 2;
		color: #FFFFFF;
		font-size: 10px;
		top: -30px;
		text-align: right;
		right: 20px;
		
	}

	.title {
		position: relative;
		padding-left: 5px;
		padding-right: 5px;
		font-size: 14px;
		top: -10px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.btn{
		line-height: 25px;
		color: #FFFFFF;
		font-size: 12px;
		min-width:50px;
		text-align: center;
		vertical-align: middle;
		padding-left: 5px;
		padding-right: 5px;
	}
</style>
